<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息列表界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/ajax.js"></script>
    <script>
        let token = sessionStorage.getItem('TOKEN')
        if (!token) {
            window.location.href = 'index.html'
        }
    </script>
    <style>
        .table,
        .table th {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">用户信息列表</h3>
            </div>
            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>用户编码</th>
                            <th>用户密码</th>
                            <th>用户姓名</th>
                            <th>用户年龄</th>
                            <th>用户性别</th>
                            <th>电话号码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="lists">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        function getUserList() {
            ajax({
                url: '/user/list'
            }).then(data => {
                let str = ''
                data.data.forEach(item => {
                    str += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.password}</td>
                            <td>${item.name}</td>
                            <td>${item.age}</td>
                            <td>${item.sex}</td>
                            <td>${item.phone}</td>
                            <td>
                                <button type="button" class="btn btn-xs btn-danger" onclick="deleteEvt('${item.id}')">删除</button>
                            </td>
                        </tr>
                    `
                })
                document.getElementById('lists').innerHTML = str
            }).catch(err => {
                alert('服务器出错！')
            })
        }
        getUserList()

        function deleteEvt(id) {
            let mima = prompt('请输入删除密码：')
            if (mima === 'jmx') {
                ajax({
                    method: 'DELETE',
                    url: '/user/' + id
                }).then(result => {
                    getUserList()
                }).catch(err => {
                    alert('服务器出错！')
                })
            } else {
                alert('密码错误!')
            }
        }
    </script>
</body>
</html>